<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-3.4.1.min.js" />"></script>
<link href="<c:url value="/resources/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css" />" rel="stylesheet">
<link href="<c:url value="/resources/bootstrap/bootstrap-4.4.1-dist/css/bootstrap-datetimepicker.min.css" />" rel="stylesheet">
<script type="text/javascript" src="<c:url value="/resources/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/bootstrap/bootstrap-4.4.1-dist/js/bootstrap-datetimepicker.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/bootstrap/bootstrap-4.4.1-dist/js/bootstrap-datetimepicker.zh-CN.js" />"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"  >
<title>项目列表</title>
<style>
    .bg-light{
        background-color: white !important;
    }
</style>
</head>
<body>
       <div id="content">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">项目列表</li>
          </ol>
        </nav>
        <div>
        <div>
        <div class="container-fluid">
            <div class="row">
                  <div class="col-6" style="margin-bottom:5px">
		            <form class="form-inline my-2 my-lg-0" action="<c:url value="/project/search.do" />" method="post">
				      <input class="form-control mr-sm-2" value="${keyWord }" type="search" name="search" placeholder="Search" aria-label="Search">
				      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
		            </form>
	              </div>
		          <div class="col-6" style="text-align:right;margin-bottom:5px">
		             <button type="button" class="btn btn-primary" onClick="creatProject()">新建</button>
		             <button type="button" class="btn btn-link" data-toggle="modal" data-target="#Dialog">导入Excel</button>
		          </div>
		    </div>
        </div>
		<div class="modal fade" id="Dialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h5 class="modal-title" id="exampleModalLabel">导入数据</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		        <form action="">
		          <div class="form-group">
		            <label for="recipient-name" class="col-form-label">请选择文件:</label>
                    <input type="file" multiple="multiple" class="form-control-file" id="uploadFile" name="uploadFile">
		          </div>
		        </form>
		      </div>
		      <div class="modal-footer">
		        <button type="submit" onClick="excelImport()" class="btn btn-primary">确定</button>
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		      </div>
		    </div>
		  </div>
		</div>

        <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col"  style="width:40%">项目名称</th>
                  <th scope="col">项目编码</th>
                  <th scope="col">业务单位</th>
                  <th scope="col">创建时间</th>
                  <th scope="col" style="width:20%">操作</th>
                </tr>
              </thead>
              <tbody>
              <c:forEach items="${pageInfo.list }" var="item" varStatus="status">
                    <tr>
	                  <th scope="row">${status.count }</th>
	                  <td>${item.projectName }</td>
	                  <td>${item.projectCode }</td>
	                  <td>${item.businessUnit }</td>
	                  <td>${item.created }</td>
	                  <td>
	                        <button type="button" class="btn btn-info" onClick="fnEditProject('${item.id}')">编辑</button>
                            <button type="button" class="btn btn-danger" onClick="fnDeleteOneEntry('${item.id}')">删除</button>
                      </td>
	                </tr>
              </c:forEach>
                <tr>
                    <td colspan="6" style="text-align:right;background-color: white">第${pageInfo.pageNum }页/共${pageInfo.pages }页,每页${pageInfo.pageSize }数据/共${pageInfo.total }数据</td>
                </tr>
              </tbody>
            </table>       
        </div>
		<nav aria-label="Page navigation example">
		  <ul class="pagination justify-content-center">
		    <li class="page-item">
              <a class="page-link"  onClick="fnGotoAanyPage('1')"  href="javascript:void(0)">首页</a>
            </li>
		    <li class="page-item <c:if test="${pageInfo.hasPreviousPage == false }"> disabled</c:if>">
		      <a  class="page-link" href="javascript:void(0)" tabindex="-1" onClick="fnGotoAanyPage('${pageInfo.prePage}')"  <c:if test="${pageInfo.hasPreviousPage == false }">aria-disabled="true"</c:if>>Previous</a>
		    </li>
		    <c:forEach items="${pageInfo.navigatepageNums }" var="item" >              
		        <li class="page-item <c:if test="${pageInfo.pageNum == item }">active</c:if>"><a class="page-link" onClick="fnGotoAanyPage('${item}')" href="javascript:void(0)">${item }</a></li>
		    </c:forEach>
		    <li class="page-item <c:if test="${pageInfo.hasNextPage == false }"> disabled</c:if>">
		      <a class="page-link"  onClick="fnGotoAanyPage('${pageInfo.nextPage}')"  href="javascript:void(0)" <c:if test="${pageInfo.hasNextPage == false }">aria-disabled="true"</c:if>>Next</a>
		    </li>
		    <li class="page-item">
              <a class="page-link"  onClick="fnGotoAanyPage('${pageInfo.pages}')"  href="javascript:void(0)">末页</a>
            </li>
		  </ul>
		</nav>
</body>
<script type="text/javascript">
    /**
    * 跳转指定 页数
    */
	function fnGotoAanyPage(targetPagtNum){
		  if(targetPagtNum == "") return;
		  var strUrl = window.location.pathname;
          strUrl += "?pageNum=" + targetPagtNum + "&pageSize=10";
		  if(strUrl.indexOf("search") > 0){
			  strUrl += "&search=" + $("input[name='search']").val();
		  }

		  location.href = strUrl;
	}
	function creatProject(){
		location.href = "<c:url value="/projectMaintain" />";	
	}
	function fnEditProject(id){
	      if(id == "" || id == "null"){
            alert("获取ID错误，请联系管理员！");
            return;
	      }
	      var strUrl = "<c:url value="/project/edit.do" />" + "?id=" + id;
	      window.location.href = strUrl;
	}
	function fnDeleteOneEntry(id){
		if(!confirm("确定删除？")){		
			return;
		}
		if(id == "" || id == "null"){
			alert("获取ID错误，请联系管理员！");
			return;
		}
		var strUrl = "<c:url value="/project/delete.do" />";
		var postData = {
			'id' : id
		};
		$.ajax({
			url: strUrl,
			type: "post",
			timeout: 10000,
			data: postData,
			dataType: "text",
			success: function(res){
				// 1 删除成功
				if(res.substring(7,res.indexOf("</mydiv>")) == "1"){
	                alert("删除成功！")
	                location.reload();
				}else{
					alert("删除失败，联系管理员处理")
				}
			},
			error: function(){
			    
			}
		})
	}
	function excelImport(){
		var input = $("#uploadFile")[0];
		var file = input.files[0];
		var type = file.name.split('.')[1];//获取文件类型
		if(type.toLowerCase() != "xls" && type.toLowerCase() != "xlsx" ){
			alert("请上传excel!");
			return;
		}
	    var formData = new FormData();

	    formData.append("file",file);
	    
		console.log(formData.get("file"))
		var strurl = "<c:url value="/project/excelImport.do" />";
		$.ajax({
			url: strurl,
			type: "post",
			dataType:'text',
			data: formData,
			processData: false,
			contentType: false,
			beforeSend: function(){
				console.log("数据上传中，请稍后。。。");
			},
			success: function(res){
				alert("2222")
				console.log(res)
				alert(res);
			},
			error: function(){
		
				alert("错误")
			}
		})
	}
</script>
</html>